This tutorial you will learn about how to insert data using asp.net mvc & AngularJS.

This is the starting part of crud operation in ASP.NET MVC.

Steps:

Step-1:

• Add Controller  SectionController.cs.
• Go to Solution Explorer > Controllers Folder> Add > Controller> Select MVC 5 Controller-Empty> Click ‘Add’ button> Give Controller Name ’ SectionController’ >  in this controller with writing the below code.

       public ActionResult SectionList()
        {
            return View();
        } 

• In the SectionEntry() Action Result Mouse right button Select Add View > Click Add Button> SectionEntry.cshtml  page has been created.

• Add Another Action result SectionEntry()with writing the below code.

• In the SectionEntry() Action Result Mouse right button Select Add View > Click Add Button> SectionEntry.cshtml  page has been created.

        public ActionResult SectionEntry()
        {
            return View();
        }

Step-2:

• Modify   SectionEntry.cshtml   Page.SectionEntry.cshtml page with writing the below code.

<div ng-app="ABCApp" ng-controller="SectionController" data-ng-init="GetOneRecord(@Convert.ToInt32(Request.QueryString["MasterId"]))">
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">Section </h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="../Section/SectionList">List View</a></li>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">

                <div class="row">

                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Batch Name</label>
                            <select class="form-control" ng-model="SectionDAO.BatchId">
                                <option ng-repeat="e in Batch" value="{{e.BatchId}}">{{e.BatchName}}</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">

                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Section Name</label>
                            <input type="text" ng-model="SectionDAO.SectionName" class="form-control" />
                        </div>
                    </div>
                </div>

                <div class="row">

                    <div class="col-md-3">
                        <input type="button" ng-click="SaveData()" class="btn btn-primary" value="{{btnSaveText}}" />
                    </div>
                </div>



            </div>
        </section>
    </div>
</div>

Step-3:

• Create SectionControllerJS.js file.
• Go to Solution Explorer > Scripts Folder.> AngularController Folder> Create   ‘SectionControllerJS.js’> for   Batch Name Load    with writing the below code.

    $http.get("/Section/ddlLoadBatch").then(function (d) {
        $scope.Batch = d.data;
    }, function (error) {
        alert("Faild");
    });

Step-4:

• In   SectionController.cs class add ddlLoadBatch() JsonResult for Load Batch Name.
• Go to Solution Explorer > Controllers Folder > SectionController.cs  in this controller with writing the below code.

       public JsonResult ddlLoadBatch()
       {
            DataSet ds = aDal.BatchDDLLoadDAL();
            List<BatchDAO> lists = new List<BatchDAO>();
            foreach (DataRow dr in ds.Tables[0].Rows)
            {
                lists.Add(new BatchDAO
                {
                    BatchId = Convert.ToInt32(dr["BatchId"]),
                   
                    BatchName = (dr["BatchName"].ToString())
                });
            }
            return Json(lists, JsonRequestBehavior.AllowGet);
        }

Step-5:

• Create  SectionDAO.cs  class.
• Go to Solution Explorer > DAO Folder > SectionDAO.cs  Class with writing the below code.

    public class SectionDAO
    {
        public int SectionId { get; set; }
        public string SL { get; set; }
        public string SectionName { get; set; }
        public int BatchId { get; set; }
        public string BatchName { get; set; }
    }

Step-6:

• Create  SectionDAL.cs  class.
• Go to Solution Explorer > DAL Folder > SectionDAL.cs  Class with writing the below code.

SqlConnection conn = new  SqlConnection(ConfigurationManager.ConnectionStrings["MyConStr"].ConnectionString);
        public DataSet BatchDDLLoadDAL()
        {
            SqlCommand com = new SqlCommand("sp_BatchDDLLoad", conn);
            com.CommandType = CommandType.StoredProcedure;
            SqlDataAdapter da = new SqlDataAdapter(com);
            DataSet dss = new DataSet();
            da.Fill(dss);
            return dss;
        }

Step-7:

• Create store Procedure for Load Batch Name.
• Go to SQL Server 2014 > dbStudentMangeSystem database> Programmability> stored procedures> Select New> stored procedure>Create sp_BatchDDLLoad with writing the below code.

create proc [dbo].[sp_BatchDDLLoad]
as
begin

select BatchId,BatchName from  tblBatch  order by BatchName
end

Step-8:

• Add Scripts Link   SectionEntry.cshtml   Page.
• SectionEntry.cshtml page with writing the below highlight code.

<div ng-app="ABCApp" ng-controller="SectionController" data-ng-init="GetOneRecord(@Convert.ToInt32(Request.QueryString["MasterId"]))">
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">Section </h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="../Section/SectionList">List View</a></li>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">

                <div class="row">

                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Batch Name</label>
                            <select class="form-control" ng-model="SectionDAO.BatchId">
                                <option ng-repeat="e in Batch" value="{{e.BatchId}}">{{e.BatchName}}</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">

                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Section Name</label>
                            <input type="text" ng-model="SectionDAO.SectionName" class="form-control" />
                        </div>
                    </div>
                </div>

                <div class="row">

                    <div class="col-md-3">
                        <input type="button" ng-click="SaveData()" class="btn btn-primary" value="{{btnSaveText}}" />
                    </div>
                </div>



            </div>
        </section>
    </div>
</div>

<script src="~/Scripts/angular.min.js"></script>

<script src="~/Scripts/AngularController/SectionControllerJS.js"></script>

Step-9:

• Add AddNewInfoDAL method in  SectionDAL.cs  class.
• Go to Solution Explorer > DAL Folder > SectionDAL.cs  Class with writing the below code.

        public void AddNewInfoDAL(SectionDAO aDao)
        {
            SqlCommand com = new SqlCommand("sp_Insert_Section", conn);
            com.CommandType = CommandType.StoredProcedure;
            com.Parameters.AddWithValue("@SectionName", aDao.SectionName);
            com.Parameters.AddWithValue("@BatchId", aDao.BatchId);
            conn.Open();
            com.ExecuteNonQuery();
            conn.Close();
        }

Step-10:

• Create store Procedure for Insert Section Information.
• Go to SQL Server 2014 > dbStudentMangeSystem database> Programmability> stored procedures> Select New> stored procedure>Create sp_Insert_Section with writing the below code.

create PROCEDURE [dbo].[sp_Insert_Section]
	-- Add the parameters for the stored procedure here
	 @SectionName nvarchar(500)=null ,
	 @BatchId int=null 
	 
AS
BEGIN
	-- SET NOCOUNT ON added to prevent extra result sets from
	INSERT INTO [dbo].[tblSection]
           (SectionName,BatchId)
     VALUES
            (@SectionName,@BatchId)
END

Step-11:

• In   SectionController.cs class add Save_Info() JsonResult for Insert Section Information.
• Go to Solution Explorer > Controllers Folder > SectionController.cs  in this controller with writing the below code.

        public JsonResult Save_Info(SectionDAO aDao)
        {
            string Mes = "";

            try
            {
                aDal.AddNewInfoDAL(aDao);
                Mes = "Operation Successful!!";
            }
            catch (Exception e)
            {
                Mes = "Operation Faild!!";
            }

            return Json(Mes, JsonRequestBehavior.AllowGet);
        }

Step-12:

• Add  SaveData function in  SectionControllerJS.js file.
• Go to Solution Explorer > Scripts Folder.> AngularController Folder> ‘SectionControllerJS.js’> for   Batch Name Load    with writing the below code.

        $scope.SaveData = function() {
        if ($scope.btnSaveText == "Save") {
            $scope.btnSaveText = "Saving.....";
            $http({
                method: 'POST',
                url: '/Section/Save_Info',
                data: $scope.SectionDAO
            }).success(function(a) {
                $scope.btnSaveText = "Save";
                $scope.SectionDAO = null;
                alert(a);
            }).error(function() {
                alert("Faild");
            });
        }

Step-13: Run Application.